import * as BABYLON from "babylonjs";

export class Shape3D {
    private _canvas: HTMLCanvasElement;
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
    private _camera: BABYLON.FreeCamera;
    private _light: BABYLON.Light;
    constructor(canvasId: string) {
        this._canvas = document.getElementById(canvasId) as HTMLCanvasElement;
        this._engine = new BABYLON.Engine(this._canvas, true);
        this._scene = {} as BABYLON.Scene;
        this._camera = {} as BABYLON.FreeCamera;
        this._light = {} as BABYLON.Light;
    }

    createScene(): void {
        this._scene = new BABYLON.Scene(this._engine);
        this._scene.ambientColor = new BABYLON.Color3(1, 1, 1); // 设置背景颜色
        this._camera = new BABYLON.FreeCamera('mycamera', new BABYLON.Vector3(0, 5, -10), this._scene);
        this._camera.setTarget(BABYLON.Vector3.Zero());
        this._camera.attachControl(this._canvas, false);
        this._light = new BABYLON.HemisphericLight('mylight', new BABYLON.Vector3(0, 1, 0), this._scene);
    }

    createShape(): void {
        // let box = BABYLON.MeshBuilder.CreateBox('mybox', { height: 5, width: 2, depth: 0.5 }, this._scene);
        // let sphere = BABYLON.MeshBuilder.CreateSphere('mysphere', { diameter: 2, diameterX: 3 }, this._scene);

        // 直线
        // let points: BABYLON.Vector3[] = [
        //     new BABYLON.Vector3(0, 0, 0),
        //     new BABYLON.Vector3(1, 0, 0),
        //     new BABYLON.Vector3(1, 1, 0),
        //     new BABYLON.Vector3(1, 1, 1)
        // ];
        // var lines = BABYLON.MeshBuilder.CreateLines('myline', { points: points }, this._scene);

        // 圆
        // let mypoints: BABYLON.Vector3[] = [];
        // for (let i = 0; i <= 360; i++) {
        //     mypoints.push(new BABYLON.Vector3(Math.sin(i / 180 * Math.PI), Math.cos(i / 180 * Math.PI), 0));
        // }
        // let lines = BABYLON.MeshBuilder.CreateLines('mycircle', { points: mypoints }, this._scene);

        // 实时更新线
        // var myPoints = [
        //     new BABYLON.Vector3(0, 0, 0),
        //     new BABYLON.Vector3(0, 1, 0),
        //     new BABYLON.Vector3(0, 1, 1),
        // ];
        // var lines = BABYLON.MeshBuilder.CreateLines('myupdateline', { points: myPoints, updatable: true }, this._scene);
        // var newPoints = [
        //     new BABYLON.Vector3(0, 5, 0),
        //     new BABYLON.Vector3(5, 3, 5),
        //     new BABYLON.Vector3(2, 5, 2)
        // ];
        // setTimeout(() => { BABYLON.MeshBuilder.CreateLines('lines', { points: newPoints, instance: lines }); }, 2000);

        // 旋转 - 设置图形向某个轴旋转
        // let mypoints: BABYLON.Vector3[] = [];
        // for (let i = 0; i <= 360; i++) {
        //     mypoints.push(new BABYLON.Vector3(Math.sin(i / 180 * Math.PI), Math.cos(i / 180 * Math.PI), 0));
        // }
        // let circle = BABYLON.MeshBuilder.CreateLines('rotate', { points: mypoints }, this._scene);
        // // circle.rotation.x = 5;
        // // circle.rotation.y = 5;
        // // circle.rotation.z = 5;
        // // circle.rotation = new BABYLON.Vector3(5, 5, 5); // 一次性设置多个rotattion
        // circle.addRotation(Math.PI/3, 0, 0).addRotation(0, Math.PI/3, 0); //设置按顺序

        // 缩放
        let mypoints: BABYLON.Vector3[] = [];
        for (let i = 0; i <= 360; i++) {
            mypoints.push(new BABYLON.Vector3(Math.sin(i / 180 * Math.PI), Math.cos(i / 180 * Math.PI), 0));
        }
        let circle = BABYLON.MeshBuilder.CreateLines('rotate', { points: mypoints }, this._scene);
        circle.scaling = new BABYLON.Vector3(3, 3, 3);
    }

    doRender(): void {
        // Run the render loop.
        this._engine.runRenderLoop(() => {
            this._scene.render();
        });

        // The canvas/window resize event handler.
        window.addEventListener('resize', () => {
            this._engine.resize();
        });
    }
}